<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件三要素</title>
</head>
<body>
    <div id="btn" onclick="handler(this)">点我</div>
    <!-- 当点击这个div的时候，弹出一个框 -->
</body>
<script>
    //事件三要素
    //1.事件源

    //2.事件处理函数

    //3.事件对象

    // 获取到这个元素，这个元素叫做时间源
    // var btn = document.getElementById("btn");

    //btn事件源
    // btn.onclick = function(event) {
    //     //事件处理函数
    //     alert('点我一次')
    //     //event 事件对象
    //     console.log(event)
    // }
    // btn.onclick = function(event) {
    //     //事件处理函数
    //     alert('点我两次了')
    //     //event 事件对象
    //     console.log(event)
    // }
    //同一个元素上绑定，同一种事件类型，后者会覆盖前者

    function handler(val) {
        console.log(val);
    }
</script>
</html>